<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <title>Document</title>
 <script src='../public/js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <!-- 
      个人理解：
      在不绑定key 的时候修改对数组进行中间插入操作时，vue重新渲染时会从插入位置往后全部重新渲染；
      在绑定key 作为唯一标识时，vue 内部 "diff" 算法 会对dom进行比对，再将新的数据插入其中，不
      会重新渲染其他dom；(在数据量大的时候将会提现很明显)
      注意：key 要保证其是唯一的，且不要使用 "index" 作为key 因为对数组进行操作时，如果改变原数
      组 "index" 也会发生变化；
      一般进行项目开发时，使用后台传递的id进行 key 的绑定 
     -->
    <!-- <ul>
      <li v-for="item in lessres">{{item}}</li>
    </ul> -->
    <ul>
      <li v-for="item in lessres" :key="item">{{item}}</li>
    </ul>
    <button @click="setArrFun()">添加元素</button>
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        lessres:['a','b','c','d']
      }
    },
    methods:{
      setArrFun() {
        this.lessres.push(2,0,'9');
        // this.lessres.pop();
        // this.lessres.shift();
        // this.lessres.unshift();
        // this.lessres.splice();
        // this.lessres.sort();
        // this.lessres.reverse();
      }
    },
    computed:{
 
    }
  })
  </script>
</body>
</html>